<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="_getWeatherWarning"
    :columns="columns"
    row-key="id"
  >
    <template #issueContent="{ record }">
      <Popover
        placement="right"
        trigger="hover"
        :overlayStyle="{ width: '400px' }"
        overlayClassName="popovper-dark"
      >
        <template #content>
          <div v-html="record.issueContent"></div>
        </template>
        <div class="truncate w-full" v-html="record.issueContent"></div>
      </Popover>
    </template>
    <template #standar="{ record }">
      <Popover
        placement="right"
        trigger="hover"
        :overlayStyle="{ width: '400px' }"
        overlayClassName="popovper-dark"
      >
        <template #content>
          <div v-html="record.standar"></div>
        </template>
        <div class="truncate w-full" v-html="record.standar"></div>
      </Popover>
    </template>
    <template #defenseGuide="{ record }">
      <Popover
        placement="right"
        trigger="hover"
        :overlayStyle="{ width: '400px' }"
        overlayClassName="popovper-dark"
      >
        <template #content>
          <div v-html="record.defenseGuide"></div>
        </template>
        <div class="truncate w-full" v-html="record.defenseGuide"></div>
      </Popover>
    </template>
  </ProTable>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { Popover } from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { listToEnum } from '@/utils/utils';
import { getWeatherWarning } from '@/api/base';
import { fetchDictOfType } from '@/api/dict';

const tableRef = ref();
const sysReportTypeEnum = ref<Record<string, any>>({});
const inti = () => {
  fetchDictOfType('sys_report_type').then((res) => {
    sysReportTypeEnum.value = listToEnum(
      res.data as any,
      'dictValue',
      'dictLabel',
    );
  });
};
inti();

const _getWeatherWarning = (params: any) => {
  const startTime = params.issueTime?.[0];
  const endTime = params.issueTime?.[1];
  return getWeatherWarning({
    ...params,
    startTime: new Date(`${startTime} 00:00:00`).getTime() || undefined,
    endTime: new Date(`${endTime} 23:59:59`).getTime() || undefined,
  });
};
const signalOptions = {
  高温: '高温',
  大风: '大风',
  雷电: '雷电',
  暴雨: '暴雨',
  强对流: '强对流',
  冰雹: '冰雹',
  雷雨大风: '雷雨大风',
  大雾: '大雾',
  海上大风: '海上大风',
  雷暴大风: '雷暴大风',
  沙尘暴: '沙尘暴',
  海上雷雨大风: '海上雷雨大风',
  海上雷电: '海上雷电',
  海上大雾: '海上大雾',
};
const levelOptions = { 蓝色: '蓝色', 黄色: '黄色', 橙色: '橙色', 红色: '红色' };
const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '事件',
    dataIndex: 'head',
    hideInSearch: true,
  },
  {
    title: '预警范围',
    dataIndex: 'address',
    hideInSearch: true,
  },
  {
    title: '省',
    dataIndex: 'province',
    hideInTable: true,
  },
  {
    title: '市',
    dataIndex: 'city',
    hideInTable: true,
  },
  {
    title: '预警类型',
    dataIndex: 'signalType',
    valueEnum: signalOptions,
  },
  {
    title: '预警等级',
    dataIndex: 'signalLevel',
    valueEnum: levelOptions,
  },
  {
    title: '预警时间',
    dataIndex: 'issueTime',
    isTime: true,
  },
  {
    title: '解除时间',
    dataIndex: 'relieveTime',
    hideInSearch: true,
  },
  {
    title: '预警内容',
    dataIndex: 'issueContent',
    width: 200,
    hideInSearch: true,
  },
  {
    title: '预警标准',
    dataIndex: 'standar',
    width: 200,
    hideInSearch: true,
  },
  {
    title: '防御指南',
    dataIndex: 'defenseGuide',
    width: 200,
    hideInSearch: true,
  },
]);
</script>
<style lang="css" scoped>
.truncate :deep(br) {
  display: none;
}
</style>
